<route>
    {
        name:'常用加密方式'
    }
</route>



<template>
    <div>
        <div class="container" style="background-color: bisque;width: 100vw;height: 100vh;">
            <div>常用加密方式</div>

            <div @click="base64Click">base64加密方式</div>
            <div @click="base64jsClick">base64加密方式-jsbase64</div>

            <div @click="md5Click">md5加密</div>

            <div @click="sha256Click">sha256加密</div>

            <div @click="sha1Click">sha1加密</div>

            <div @click="aseClick">ase加密</div>

            <div @click="escapeClick">字符串编码</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Base64 } from 'js-base64';
import { md5 } from 'js-md5';
import sha256 from 'crypto-js/sha256';
import sha1 from 'crypto-js/sha1';
import CryptoJS from 'crypto-js';
import { Encrypt, Decrypt } from '../assets/js/crypto.js';
import { ecbEncrypt, ecbDecrypt } from '../assets/js/ecb.js';


const base64Click = () => {
    const btoa = window.btoa('hello, my name is Zhang San')  // 编码
    console.log('加密后', btoa)
    const atob = window.atob('aGVsbG8sIG15IG5hbWUgaXMgRnVDaGFveWFuZyA')  // 解码
    console.log('解密后', atob)
}

const base64jsClick = () => {
    const encode = Base64.encode('hello, my name is Zhang San'); // 编码
    console.log('插件加密后', encode);
    const decode = Base64.decode('aGVsbG8sIG15IG5hbWUgaXMgRnVDaGFveWFuZyA'); // 解码
    console.log('插件解密后', decode);
}

const md5Click = () => {
    const md5Str = md5('hello, my name is Zhang San'); // 编码
    console.log('md5加密后', md5Str);

    // MD5加盐加密
    const salt = 'AbC$123'; // 定义一个随机的盐值
    console.log('加盐后md5加密', md5('hello, my name is zhangsan' + salt));
    // MD5多次加密
    console.log('md5多次加密', md5(md5('hello, my name is zhangsan')));
}

const sha256Click = () => {
    const sha256Str = sha256('hello, my name is Zhang San'); // 编码
    console.log('sha256加密后', sha256Str);
    console.log('sha1加密后', sha1('hello, my name is zhangsan'));
}

const sha1Click = () => {
    const sha1Str = sha1('hello, my name is Zhang San'); // 编码
    console.log('sha1加密后', sha1Str);
}

const aseClick = () => {
    let aesStr = Encrypt('wo shi zhangsan')
    console.log('AES加密后', aesStr);
    console.log('AES解密后', Decrypt(aesStr));
}

// const aseClick = () => {
//     let aesStr = ecbEncrypt('wo shi zhangsan')
//     console.log('AES加密后', aesStr);
//     console.log('AES解密后', ecbDecrypt(aesStr));
// }

const escapeClick = () => {
    var url = "http://localhost:8080/pro?a=1&b=张三&c=aaa";
    var url1 = escape(url);
    // http%3A//localhost%3A8080/pro%3Fa%3D1%26b%3D%u5F20%u4E09%26c%3Daaa         

    var url2 = encodeURI(url);
    // http://localhost:8080/pro?a=1&b=%E5%BC%A0%E4%B8%89&c=aaa   

    var url3 = encodeURIComponent(url);
    // http%3A%2F%2Flocalhost%3A8080%2Fpro%3Fa%3D1%26b%3D%E5%BC%A0%E4%B8%89%26c%3Daaa   

    var vurl1 = unescape(url1);
    // http://localhost:8080/pro?a=1&b=张三&c=aaa

    var vurl2 = decodeURI(url2);
    // http://localhost:8080/pro?a=1&b=张三&c=aaa

    var vurl3 = decodeURIComponent(url3);
    // http://localhost:8080/pro?a=1&b=张三&c=aaa  

    console.log('url1', url1);
    console.log('');
    console.log('url2', url2);
    console.log('');
    console.log('url3', url3);
    console.log('');
    console.log('');
    console.log('');

    console.log('vurl1', vurl1);
    console.log('');
    console.log('vurl2', vurl2);
    console.log('');
    console.log('vurl3', vurl3);

}

</script>

<style>
#app {
    margin: 0 !important;
}

body {
    margin: 0;

    .container {
        width: 100vw;
        height: 100vh;
        padding-top: 20px;

        div {
            /* width: 100px; */
            margin: 0 auto 20px auto;
            max-width: 200px;
            height: 40px;
            line-height: 40px;
            border-radius: 20px;
            background-color: olivedrab;
            color: white;

        }


        :nth-child(4) {
            background-color: seagreen;
        }

        :nth-child(5) {
            background-color: darkolivegreen;
        }

        :nth-child(6) {
            background-color: green;
        }

        :nth-child(7) {
            background-color: slategrey;
        }

        :nth-child(8) {
            background-color: goldenrod;
        }
    }
}
</style>